<template>
	<view class="marketing-manage">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="activity-list">
			<view class="activity-item" v-for="(item,index) in list" :key="index"
				@click="pageRoute('/merchantPages/market/detail?id='+item.id)">
				<view class="cover">
					<image :src="item.img" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="name">{{item.title}}</view>
					<view class="time">发布时间:{{item.create_time}}</view>
					<view class="other">
						<view>
							审核状态:
							<text v-if="item.status == 1" style="color: blue;">审核通过</text>
							<text v-else-if="item.status == 2" style="color: blue;">审核驳回</text>
							<text v-else style="color: red;">待审核</text>
						</view>
						<view>支付状态:
							<text v-if="item.pay_status == 1" style="color: blue;">已支付</text>
							<text v-else style="color: red;">未支付</text>
						</view>
						<view>活动状态:
							<text v-if="item.done == 1" style="color: blue;">进行中</text>
							<text v-else-if="item.done == 2" style="color: blue;">已结束</text>
							<text v-else style="color: red;">未开始</text>
						</view>
					</view>
					<view class="desc">{{ item.remark }}</view>
				</view>
				<view class="btn-group">
					<u-button type=" info" size="mini" plain
						@click="pageRoute('/merchantPages/market/detail?id='+item.id+'&look=1')">详情</u-button>
					<block v-if="authCheck('api/merchant.marketing/saveOrUpdate')">
						<u-button type="success" size="mini" v-if="item.status == 0 && item.pay_status == 0" plain
							@click="pageRoute('/merchantPages/market/push?id='+item.id)">编辑</u-button>
					</block>
					<block v-if="item.pay_status==1 && item.status == 1 && item.done == 2">
						<u-button type="error" size="mini" plain v-if="parseFloat(item.surplus_amount)>0"
							@click="refund(item.id)">退款</u-button>
						<u-button type="error" size="mini" plain v-else @click="del(item.id)">删除</u-button>
					</block>
					<u-button type="primary" size="mini" v-if="item.pay_status == 0" plain
						@click="toPay(item.id)">去支付</u-button>
					<u-button type="primary" size="mini"
						v-if="item.status == 1 && item.done == 0 && item.pay_status == 1" plain
						@click="statusInfo(item.id)">开始活动</u-button>
					<u-button type="info" size="mini" v-if="item.status == 1 && item.done == 1 && item.pay_status == 1"
						plain @click="doneInfo(item.id)">结束活动</u-button>
				</view>
			</view>
			<view class="empty-data" v-if="list.length===0">暂无数据</view>
		</view>

		<uni-fab :pattern="pattern" horizontal="left" vertical="bottom" @fabClick="fabClick" />
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '营销活动',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		isMore: true,
		list: [],
		pattern: {
			buttonColor: '#007AFF',
			iconColor: '#fff',
			icon: 'plusempty',
		},
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		initData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function initData() {
		state.list = [];
	}

	function fabClick() {
		console.log('点击悬浮按钮');
		pageRoute('/merchantPages/marketing-manage/marketing-form');
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		isMore,
		list,
		pattern,
	} = toRefs(state);
</script>

<style lang="scss">
	.marketing-manage {
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
		padding-top: 24rpx;

		.activity-list {
			padding: 0 $m24;

			.activity-item {
				background: #fff;
				margin: 0 0 $m24 0;
				padding: 0 0 $m12 0;
				border-radius: 10rpx;

				.cover {
					width: 100%;
					height: 250rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx 10rpx 0 0;
					}
				}

				.info {
					padding: $m16;

					.name {
						padding: 0 0 $m16 0;
						font-size: $font-32;
						color: $main-color;
						font-weight: 700;
					}

					.time {
						margin: 0 0 $m8 0;
					}

					.other {
						display: flex;
						justify-content: space-between;

						view {
							font-size: $font-26;
						}

					}

					.desc {
						@include ellipsis(2);
						padding: $m12 0;
						line-height: 40rpx;
						font-size: $font-28;
						color: $tips-color;
					}
				}

				.btn-group {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					margin: 0 0 $m20 0;

					:deep(.hi-button) {
						min-width: 120rpx;
						margin-left: $m20;
					}
				}
			}

			.empty-data {
				margin-bottom: $m24;
				padding: $m24;
				background-color: #fff;
				border-radius: $radius-16;
				text-align: center;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>